<template>
  <div class="approval-form-wrapper">
    <van-nav-bar
      class="header"
      :fixed="true"
      left-arrow
      left-text="取消"
      right-text="确认"
      title="选择审批单"
      :border="false"
      @click-left="onBack"
      @click-right="confirmFun"
    >
    </van-nav-bar>
    <BarInput
      :placeholder="state.placeholder"
      @getBarInputValue="getBarInputValue"
    />
    <div class="approval-form-content">
      <div style="padding: 11px 15px;">
        <van-radio-group v-model="state.approvalFormRadio">
          <div
            class="approval-form-content-box"
            v-show="item.show"
            v-for="(item, index) in state.approvalArrList"
            :key="item.apply_detail_id"
            @click="radioClick(item, index)"
          >
            <div class="left">
              <img src="./img/approval-icon.png" alt="" />
            </div>
            <div class="right">
              <div
                class="approval-form-content-box-header van-hairline--bottom"
              >
                <div>审批单号：{{ item.approval_number }}</div>
                <div style="margin-right: 12px">
                  <van-radio :name="item.apply_detail_id"></van-radio>
                </div>
              </div>
              <div class="approval-form-content-box-body">
                <div>出差人员：{{ item.person_name }}</div>
                <div>
                  出差时间：
                  {{ dateFormat(new Date(item.start_time.replace(/-/g, "/")), "yyyy-MM-dd") }}
                  至
                  {{ dateFormat(new Date(item.end_time.replace(/-/g, "/")), "yyyy-MM-dd") }}
                </div>
                <div>出差城市：{{ item.arrival_city_name }}</div>
              </div>
            </div>
          </div>
        </van-radio-group>
      </div>
      <div class="bottom-test">已显示所有审批单</div>
    </div>
  </div>
</template>

<script setup>
import BarInput from "../BarInput/BarInput.vue";
import { reactive, onMounted, getCurrentInstance, watch } from "vue";
import { useRouter } from "vue-router";
import { dateFormat } from "../../assets/js/public";

const router = useRouter();
const emit = defineEmits(["commitApprovalList"]);
const { proxy } = getCurrentInstance();

const state = reactive({
  bar_input_value: "",
  placeholder: "输入审批单号/出行人/城市名称",
  approvalFormRadio: "",
  approvalArrList: [],
  radioIndex: null,
  timer: null
});

onMounted(() => {
  init();
});

const init = () => {
  getTripApproval();
};

const getTripApproval = async val => {
  const url = "/security/v1/common/tripApproval";
  const data = {
    member_id: localStorage.memberId,
    business_type: "2",
    is_domestic: "1"
  };
  const res = await proxy.$axiosJson(url, data);
  if (res.biz_result === "SUCCESS" && res.ret_code === "10000") {
    res.data.apply_details.forEach(item => {
      item.show = true;
    });
    state.approvalArrList = res.data.apply_details;
  }
};

// 单选取消
const radioClick = (item, index) => {
  if (state.radioIndex === index) {
    state.approvalFormRadio = "";
    state.radioIndex = null;
  } else {
    state.radioIndex = index;
    state.approvalFormRadio = item.apply_detail_id;
  }
};

// 获取 barinput 的值
const getBarInputValue = val => {
  state.bar_input_value = val;
};

const onBack = () => {
  router.back();
};

const confirmFun = () => {
  if (state.approvalFormRadio) {
    let info = state.approvalArrList.find(item => {
      return item.apply_detail_id === state.approvalFormRadio;
    });
    emit("commitApprovalList", info);
    onBack();
  } else {
    emit("commitApprovalList", info);
    onBack();
  }
};

const clearTimer = () => {
  if (state.timer) {
    clearTimeout(state.timer);
  }
};

watch(
  () => state.bar_input_value,
  () => {
    let val = state.bar_input_value.toUpperCase();
    clearTimer();
    if (val && val.length > 0) {
      // 获取当前延时函数的ID，便于后面clearTimeout清除该ID对应的延迟函数
      state.timer = setTimeout(() => {
        state.approvalArrList.forEach(v => {
          v.show = false;
          if (v.approval_number && v.approval_number.indexOf(val) !== -1) {
            v.show = true;
          }
          if (
            v.departure_city_name &&
            v.departure_city_name.indexOf(val) !== -1
          ) {
            v.show = true;
          }
          if (v.arrival_city_name && v.arrival_city_name.indexOf(val) !== -1) {
            v.show = true;
          }
          if (v.person_name && v.person_name.indexOf(val) !== -1) {
            v.show = true;
          }
        });
      }, 200);
    } else {
      state.approvalArrList.forEach(v => {
        v.show = true;
      });
    }
  }
);
</script>

<style lang="less" scoped>
.approval-form-wrapper {
  :deep(.header) {
    position: static;
    box-shadow: 0px 0px 11px -3px rgba(0, 0, 0, 0.33);
  }
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 11000;
  background: #f7f7f7;
  .van-nav-bar-title {
    font-size: 16px;
  }
  .van-nav-bar-left,
  van-nav-bar-right {
    font-size: 14px;
    color: #333;
  }
  .van-nav-bar-right {
    color: #208cff;
  }

  .approval-form-content {
    position: fixed;
    top: 102px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    font-size: 12px;
    overflow-y: scroll;
    .approval-form-content-box {
      display: flex;
      background: #ffffff;
      border-radius: 5px;
      margin-bottom: 12px;
      padding-bottom: 2px;
    }
    .left {
      width: 31px;
      padding-left: 11px;
      img {
        margin-top: 12px;
        width: 20px;
        height: 20px;
      }
    }
    .right {
      flex: 1;
      padding-left: 9px;
      .approval-form-content-box-header {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .approval-form-content-box-body {
        line-height: 22px;
        padding: 6px 0;
        color: #999999;
      }
    }
  }
  .bottom-test {
    color: #999;
    font-size: 15px;
    text-align: center;
    margin-top: 16px;
  }
}
</style>
